<template>
	<hyb-page :title="title">
		<template v-slot:body>
			<form @submit="submit">
				<view class="gui-bg-white gui-dark-bg-level-3 ">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">姓名</text>
						<view class="gui-form-body">
							<input class="gui-form-input" v-model="formData.name" placeholder="请输入姓名" />
						</view>
					</view>
				</view>
				<view class="gui-bg-white gui-dark-bg-level-3 " v-if="tag != 'xycl'">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">年龄</text>
						<view class="gui-form-body">
							<input type="number" class="gui-form-input" v-model="formData.age" placeholder="请输入年龄" />
						</view>
					</view>
				</view>

				<view class="gui-bg-white gui-dark-bg-level-3 " v-if="tag != 'xycl'">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">性别</text>
						<view class="gui-form-body gui-flex">

							<gui-radio :checked="formData.sex == '男'" @change="changeSex('男')">
								<text class="gui-text">男</text>
							</gui-radio>

							<gui-radio :checked="formData.sex == '女'" @change="changeSex('女')"
								style="margin-left: 80rpx;">
								<text class="gui-text">女</text>
							</gui-radio>
						</view>
					</view>
				</view>

				<view class="gui-bg-white gui-dark-bg-level-3 " v-if="tag != 'xycl'">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">小区</text>
						<view class="gui-form-body">
							<input  class="gui-form-input" v-model="formData.address"
								placeholder="请输入小区名/楼号/房间号" />
						</view>
					</view>
				</view>

				<view class="gui-bg-white gui-dark-bg-level-3 ">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">身份证号</text>
						<view class="gui-form-body">
							<input class="gui-form-input" v-model="formData.id_num" placeholder="请输入身份证号" />
						</view>
					</view>
				</view>


				<view class="gui-bg-white gui-dark-bg-level-3 " v-if="tag=='xycl'">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">测量仪参数</text>
						<view class="gui-form-body gui-flex gui-align-items-center">
							<input class="gui-form-input gui-flex1" v-model="formData.device" placeholder="请输入测量仪参数" />

							<!-- #ifdef MP -->
							<text @tap="scan()" style="font-size: 30px;"
								class="gui-icons gui-bold gui-block gui-color-red gui-text">&#xe631;</text>
							<!-- #endif -->

						</view>

					</view>
				</view>



				<view class="gui-bg-white gui-dark-bg-level-3" v-if="tag=='manage' || tag=='xycl'">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">绑定用户</text>
						<view class="gui-form-body" @click="bind_user()">
							<input type="number" disabled class="gui-form-input" v-model="formData.u_id"
								placeholder="选择用户" />

						</view>
						<text class="gui-block gui-color-gray gui-text gui-icons">&#xe601;</text>
					</view>
				</view>


				<view class="gui-bg-white gui-dark-bg-level-3 gui-margin-top" v-if="tag != 'xycl'">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-secondary-text">是否需要建立个人健康档案:</text>
						<view class="gui-form-body">
							<switch :checked="formData.flag" @change="changeFlag" color="#008AFF" />
						</view>
					</view>
				</view>


				<view class="gui-bg-white gui-dark-bg-level-3" v-if="formData.flag && tag != 'xycl'">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">上门预约时间</text>
						<view class="gui-form-body gui-flex1 gui-bg-white">
							<gui-datetime @confirm="timeComfirm" v-model="formData.reservation_time">
								<view class="gui-padding-small  gui-form-input gui-flex gui-space-between">
									<view> {{formData.reservation_time}}<text v-if="!formData.reservation_time"
											class="gui-color-gray">上门预约时间</text></view>
									<text class="gui-icons gui-color-gray gui-text">&#xe6d1;</text>
								</view>
							</gui-datetime>
							<!-- <input class="gui-form-input" v-model="formData.reservation_time" placeholder="请输入上门预约时间" /> -->
						</view>
					</view>
				</view>

				<view class="gui-bg-white gui-dark-bg-level-3 " v-if="tag != 'xycl'">
					<view class="gui-form-item gui-border-b gui-padding">
						<text class="gui-form-label gui-secondary-text">备注</text>
						<view class="gui-form-body">
							<input class="gui-form-input" v-model="formData.remark" placeholder="请输入备注" />
						</view>
					</view>
				</view>


			</form>

			<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top">
				<button type="default" class="gui-button gui-bg-primary gui-noborder" @tap="confirm"
					style="border-radius:50rpx;">
					<text class="gui-color-white gui-button-text">保存</text>
				</button>
			</view>
		</template>
	</hyb-page>
</template>

<script>
	import graceChecker from "@/Grace6/js/checker.js";
	export default {
		data() {
			return {
				title: "档案信息",
				id: 0,
				tag: "",
				formData: {
					h_id: 0,
					name: "",
					age: "",
					sex: "",
					address: "",
					id_num: "",
					device: "",
					flag: false,
					reservation_time: "",
					remark: ""
				},
				rule: [{
						name: "name",
						checkType: "string",
						checkRule: "2,20",
						errorMsg: "请输入正确姓名"
					},
					{
						name: "age",
						checkType: "intBetween",
						checkRule: "12,100",
						errorMsg: "请输入正确年龄!"
					},

					{
						name: "sex",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "请选择性别!"
					},
					{
						name: "address",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "请输入小区!"
					},


					{
						name: "id_num",
						checkType: "idCard",
						errorMsg: "身份证错误!"
					},


					// {
					// 	name: "device",
					// 	checkType: "string",
					// 	checkRule: "2,100",
					// 	errorMsg: "请输入正确设备参数!"
					// }
				]
			}
		},

		onLoad(options) {
			if (options.tag) this.tag = options.tag;
			if (options.id) this.id = options.id;

			if (this.tag == 'manage') {
				this.title = "添加档案";
			}
			if (options.id || this.tag != 'manage') {
				uni.gPost("health/info", {
					id: this.id
				}).then((info) => {
					if (info) {
						
                        if(this.tag == 'xycl'){
                            this.title = "血压测量仪";
                        }else{
                            this.title = "修改档案";
                        }
						this.formData = info;
					}
				})
			}
            
            
		},

		methods: {
			timeComfirm(res) {
				this.formData.reservation_time = res[0] + '-' + res[1] + '-' + res[2] + ' ' + res[3] + ':' + res[4] + ':' +
					res[5];
			},
			changeFlag(e) {
				console.log(e)
				this.formData.flag = e.detail.value
			},
			changeSex(val) {
				this.formData.sex = val
			},
			scan() {
				uni.scanCode({
					success: (res) => {
						console.log(res.result)
						this.formData.device = res.result
					}
				})
			},
			bind_user() {

				uni.$once("choose_user", (res) => {
					this.formData.u_id = res.u_id
				})


				// uni.navigateTo({
				// 	url: "/hyb_o2o/user/list/list?tag=1"
				// })
			},

			confirm() {
				var checkRes = graceChecker.check(this.formData, this.rule);
				if (checkRes) {
					if (this.formData.flag && !this.formData.reservation_time) {
						uni.showToast({
							title: "请选择预约时间",
							icon: "none"
						});
					}
					uni.gPost("health/save", this.formData).then((res) => {
						uni.showToast({
							title: "保存成功"
						})
					})
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
		}
	}
</script>

<style>
	.gui-form-label {
		width: 180rpx !important;
	}
</style>
